<template>
  <ml-row gutter="10" style="margin-top: 20px">
    <ml-col>
      <ml-pagination
        style="display: inline-block"
        @pagination="pagination"
        :page.sync="nowPage"
        :size="Number(limit)"
        :total="total">
      </ml-pagination>
      <div style="line-height: 32px; display: inline-block; vertical-align: top; margin-left: 20px;">
        每页
        <ml-select2 v-model="limitStr">
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="150">150</option>
          <option value="200">200</option>
          <option value="300">300</option>
          <option value="500">500</option>
        </ml-select2>
        个
      </div>
      <div style="line-height: 32px; display: inline-block; vertical-align: top; margin-left: 20px;">
        跳转到第
        <ml-input style="width: 50px" v-model="pageToJump"></ml-input>
        页
        <ml-button style="margin-left: 10px" icon="arrow-right" @click="jumpToPage()" intent="primary">跳转</ml-button>
      </div>
    </ml-col>
  </ml-row>
</template>
<script>
export default {
  data () {
    return {
      limitStr: 10,
      pageToJump: 1,
      nowPage: 1
    }
  },
  watch: {
    page (v) {
      if (v) {
        this.nowPage = this.page
      }
    },
    limitStr (v) {
      if (Number(v) !== Number(this.limit)) {
        this.pagination(this.nowPage)
      }
    }
  },
  props: ['limit', 'total', 'page'],
  methods: {
    pagination (v) {
      var data = {
        page: v,
        limit: this.limitStr
      }
      this.$emit('goPage', data)
    },
    jumpToPage () {
      var pageToJump = parseInt(this.pageToJump)
      if (pageToJump > 0 && pageToJump <= Math.ceil(this.total / this.limitStr)) {
        this.nowPage = pageToJump
        this.pagination(this.nowPage)
      } else {
        this.$message({
          type: 'warning',
          message: '页面不存在'
        })
      }
    }
  }
}
</script>
